<script setup lang="ts">
import dayjs from 'dayjs'
import { CouponType } from '@/types/enum'

const props = withDefaults(defineProps<{
  windowTitle: string
  period: {
    start: string
    end: string
  }
  couponList: Coupon[]
  buttonLabel: string
}>(), {
  buttonLabel: '立即预约',
})

const emits = defineEmits(['cancel'])

const router = useRouter()

function handleTapAppointment() {
  emits('cancel')
  router.push('appointment')
}
</script>

<template>
  <view class="absolute left-50% top-50% flex flex-col items-center -translate-50%">
    <view class="flex flex-col items-center" @tap.stop="">
      <view class="relative h-890rpx w-750rpx flex flex-col items-center">
        <image class="absolute h-890rpx w-750rpx" src="@/static/images/coupon_modal_window.png" />
        <view class="absolute left-90rpx top-112rpx text-49rpx text-white font-semibold leading-69rpx">
          {{ props.windowTitle }}
        </view>
        <view class="absolute left-90rpx top-182rpx text-22rpx text-white text-opacity-80 font-semibold leading-32rpx">
          有效期：{{ `${dayjs(props.period.start).format('YYYY-MM-DD')}-${dayjs(props.period.end).format('YYYY-MM-DD')}` }}
        </view>
        <view class="absolute top-230rpx h-571rpx w-560rpx flex flex-col items-center border-1rpx border-#979797 rounded-40rpx border-solid bg-white x-center">
          <Spacer height="40" />
          <view v-for="coupon in couponList" :key="coupon.id" class="relative mb-24rpx h-162rpx w-478rpx flex items-center justify-between">
            <image class="absolute left-0 top-0 h-162rpx w-478rpx" src="@/static/images/coupon_modal_coupon.png" />
            <view class="relative h-162rpx w-167rpx flex items-center justify-center pl-10rpx">
              <view v-if="coupon.type === CouponType.满减券 || coupon.type === CouponType.定额券" class="flex items-baseline">
                <view class="text-42rpx text-#F94E40 font-semibold leading-59rpx">
                  ¥
                </view>
                <view class="text-72rpx text-#F94E40 font-semibold leading-100rpx">
                  {{ coupon.complete_money }}
                </view>
              </view>
              <view v-else-if="coupon.type === CouponType.折扣券" class="flex items-baseline">
                <view class="text-72rpx text-#F94E40 font-semibold leading-100rpx">
                  {{ coupon.discount }}折
                </view>
              </view>
              <view v-else-if="coupon.type === CouponType.洗牙券" class="flex items-baseline">
                <view class="text-72rpx text-#F94E40 font-semibold leading-100rpx">
                  1张
                </view>
              </view>
            </view>
            <view class="relative h-162rpx w-277rpx flex flex-col items-center justify-center">
              <view class="text-35rpx text-#FFFDEB font-semibold leading-49rpx">
                {{ coupon.name }}
              </view>
              <block v-if="coupon.type === CouponType.满减券 || coupon.type === CouponType.折扣券">
                <Spacer height="16" />
                <view class="text-25rpx text-#FFFDEB font-semibold leading-36rpx">
                  {{ `满${coupon.money}可使用` }}
                </view>
              </block>
            </view>
          </view>
          <button class="absolute bottom-48rpx h-102rpx w-478rpx flex items-center justify-center from-#F94E40 to-#FFB246 bg-gradient-to-br text-42rpx text-#FFFDEB font-semibold leading-59rpx x-center" @tap="handleTapAppointment">
            {{ props.buttonLabel }}
          </button>
        </view>
      </view>
    </view>
    <image class="h-77rpx w-77rpx" src="@/static/images/xmark_circle_large.png" @tap="$emit('cancel')" />
  </view>
</template>
